<template>
    <div id="office">
        <div class="crumbs">
            <!--导航栏-->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/welcome">
                    <i class="iconfont icon-home nav-icon"></i>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="no-active">用户管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!--查询表单-->
            <el-form :inline="true" size="mini" :model="query" class="demo-form-inline">
                <el-form-item label="真实姓名">
                    <el-input v-model="query.relName" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item label="所在科室">
                    <el-select v-model="query.byOfficeId" placeholder="所在科室" clearable filterable>
                        <el-option v-for="office of offices" :label="office.officeName" :value="office.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户类别">
                    <el-select v-model="query.userTypeId" placeholder="用户类别" clearable filterable>
                        <el-option v-for="type of userTypes" :label="type.constantName" :value="type.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="pageSearchHandler">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="addPageHandler">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <div class="container table">
            <el-table :data="tableData" border stripe class="table_td">
                <el-table-column prop="id" label="编号" width="60" align="center"></el-table-column>
                <el-table-column prop="logName" label="登录名"></el-table-column>
                <el-table-column prop="relName" label="真实姓名" width="80"></el-table-column>
                <el-table-column prop="byOfficeId" label="所在科室" :formatter="officeFormatter"></el-table-column>
                <el-table-column prop="userTypeId" label="用户类别" :formatter="userTypeFormatter"></el-table-column>
                <el-table-column prop="academicInfoId" label="职称信息" :formatter="academicFormatter"></el-table-column>
                <el-table-column prop="participateArrange" label="是否排班" width="110">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.participateArrange"
                                active-text="是" inactive-text="否"
                                :active-value="1" :inactive-value="0" @change="updateRuleHandler(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="userStatus" label="用户状态" width="150">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.userStatus"
                                active-color="#13ce66" inactive-color="#ff4949"
                                active-text="启用" inactive-text="禁用"
                                :active-value="0" :inactive-value="1" @change="updateStatusHandler(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="入职时间" width="155"></el-table-column>
                <el-table-column width="180px" align="center" label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editPageBtnHandler(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
                        <el-button type="text" size="small" @click="delBtnHandler(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                        <el-button type="text" size="small" @click="reloadBtnHandler(scope.row.id)"><i class="el-icon-refresh"></i>重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="table_page">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        small
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="pageIndexHandler">
                </el-pagination>
            </div>
        </div>
        <!--添加的对话框-->
        <div class="dialog">
            <el-dialog title="用户操作" :visible.sync="dialogVisible">
                <el-form size="mini" :model="form" :rules="rules" ref="ruleForm" label-width="120px">
                    <el-form-item label="真实姓名" prop="relName">
                        <el-input v-model="form.relName" :disabled="isEditPage" placeholder="真实姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="所在科室" prop="byOfficeId">
                        <el-select v-model="form.byOfficeId" placeholder="所在科室" clearable filterable>
                            <el-option v-for="office of offices" :label="office.officeName" :value="office.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户类别" prop="userTypeId">
                        <el-select v-model="form.userTypeId" placeholder="用户类别" clearable filterable @change="existInfo">
                            <el-option v-for="type of userTypes" :label="type.constantName" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-show="existInfoFlag" label="职称信息" prop="academicInfoId">
                        <el-select v-model="form.academicInfoId" placeholder="职称信息">
                            <el-option v-for="academic of academicInfos" :label="academic.constantName" :value="academic.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户状态" prop="userStatus">
                                <el-switch
                                        v-model="form.userStatus"
                                        active-color="#13ce66" inactive-color="#ff4949"
                                        active-text="启用" inactive-text="禁用"
                                        :active-value="0" :inactive-value="1">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item v-show="existInfoFlag" label="是否排班" prop="participateArrange">
                                <el-switch
                                        v-model="form.participateArrange"
                                        active-text="是" inactive-text="否"
                                        :active-value="1" :inactive-value="0" >
                                </el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="info" native-type="reset" icon="el-icon-refresh-right" >重置</el-button>
                        <el-button v-if="isEditPage" type="success" icon="el-icon-edit" @click="editBtnHandler">编辑</el-button>
                        <el-button v-else type="success" icon="el-icon-plus" @click="addBtnHandler">添加</el-button>
                        <el-button type="primary" icon="el-icon-close" @click="dialogVisible=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'office',
        data(){
            //自定验证规则
            let validateRelName = (rule, value, callback) => {
                if (value === undefined || value.trim() === '') {
                    callback(new Error('请输入真实名称'));
                } else {
                    if(this.isEditPage){ //如果是编辑操作，则不再验证用户名是否存在
                        callback(); //放行
                    }else{
                        //发送当前输入的信息，到后端验证
                        this.$api.user.exist(value).then(res=>{
                            if(res.code === 201 ){
                                callback(new Error(res.msg)); //警告，拦截
                            }else{
                                callback(); //放行
                            }
                        });
                    }
                }
            };
            let validateAcademic = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择职称信息'));
                }
                callback();
            };
            return {
                query:{
                    relName:'', //真实姓名
                    byOfficeId:'', //所在科室
                    userTypeId:'',//用户类别
                    pageIndex:1, //页码
                    pageSize:10 //每页显示的条数
                },
                form:{
                    id:'',//主键ID
                    relName:'', //真实姓名
                    byOfficeId:'', //所在科室
                    userTypeId:'', //用户类别
                    academicInfoId:'', //职称信息
                    participateArrange:0,// 是否排班
                    userStatus:0 // 用户状态
                },
                pageTotal:0, //总条数
                tableData: [], //表格数据
                dialogVisible:false, //对话框显示标识
                isEditPage:false,//是否是为编辑页面
                offices:[],//用户所在科室
                userTypes:[],//用户类别
                academicInfos:[],//职称信息
                existInfoFlag:false,//职称信息和是否排班表示
                rules:{
                    relName :[{ validator:validateRelName, trigger: 'blur' }],
                    byOfficeId :[{ required: true, message: '请选择所在科室', trigger: 'blur' }],
                    userTypeId :[{ required: true, message: '请选择用户类别', trigger: 'blur' }],
                    academicInfoId :[{ validator:validateAcademic, trigger: 'blur' }]
                }
            }
        },
        methods:{
            //分页查询
            pageSearchHandler(){
                this.$api.user.page(this.query).then(res=>{
                    this.tableData = res.data;
                    this.pageTotal = res.total;
                });
            },
            //点击页码查询
            pageIndexHandler(index){
                this.query.pageIndex = index;
                this.pageSearchHandler();
            },
            //显示添加弹出层
            addPageHandler(){
                this.form={
                    id:'',//主键ID
                    relName:'', //真实姓名
                    byOfficeId:'', //所在科室
                    userTypeId:'', //用户类别
                    academicInfoId:'', //职称信息
                    participateArrange:0,// 是否排班
                    userStatus:0 // 用户状态
                };
                this.isEditPage = false;
                this.dialogVisible = true
            },
            //添加
            addBtnHandler(){
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.$api.user.save(this.form).then(res=>{
                            if(res.code === 200){
                                //关闭添加的弹出层
                                this.dialogVisible = false;
                                //加载列表
                                this.pageSearchHandler();
                                this.$message.success(res.msg);
                            }
                        });
                    }
                });
            },
            //删除
            delBtnHandler(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '删除提示', { type: 'warning'}).then(() => {
                    this.$api.user.delById(row.id).then(res=>{
                        if(res.code === 200){
                            //重新加载列表
                            this.pageSearchHandler();
                            this.$message.success(res.msg);
                        }
                    });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },
            //显示修改页面
            editPageBtnHandler(row){
                this.form.id = row.id;
                this.form.relName = row.relName;
                this.form.byOfficeId = row.byOfficeId;
                this.form.userTypeId = row.userTypeId;
                this.form.academicInfoId = row.academicInfoId;
                this.form.participateArrange = row.participateArrange;
                this.form.userStatus = row.userStatus;
                this.dialogVisible= true;
                this.isEditPage = true;
                this.existInfoFlag = row.userTypeId === 12;
            },
            //重置密码
            reloadBtnHandler(id){
                this.$api.user.reload(id).then(res=>{
                    if(res.code === 200){
                        this.$message.success(res.msg);
                    }
                });
            },
            //用户编辑
            editBtnHandler(){
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.$api.user.editById(this.form).then(res=>{
                            if(res.code===200){
                                this.dialogVisible=false;
                                this.pageSearchHandler();
                                this.$message.success(res.msg);
                            }
                        });
                    } else {
                        this.$message.error('请输入必填项信息');
                        return false;
                    }
                });
            },
            //科室格式化
            officeFormatter(row,col,cellVal){
                let types = this.offices.filter(val=>val.id === Number.parseInt(cellVal));
                return types.length !== 0?types[0].officeName:"";
            },
            //用户类别格式化
            userTypeFormatter(row,col,cellVal){
                let types = this.userTypes.filter(val=>val.id === Number.parseInt(cellVal));
                return types.length !== 0?types[0].constantName:"";
            },
            //职称格式化
            academicFormatter(row,col,cellVal){
                let types = this.academicInfos.filter(val=>val.id === Number.parseInt(cellVal));
                return types.length !== 0?types[0].constantName:"";
            },
            //修改用户是否排班
            updateRuleHandler(row){
                this.$api.user.editById({id:row.id,participateArrange:row.participateArrange}).then(res=>{
                    if(res.code===200){
                        this.$message.success('修改用户排班成功~');
                    }
                });
            },
            //修改用户状态
            updateStatusHandler(row){
                this.$api.user.editById({id:row.id,userStatus:row.userStatus}).then(res=>{
                    if(res.code===200){
                        this.$message.success('修改用户状态成功~');
                    }
                });
            },
            //职称信息和是否排班动态显示
            existInfo(){
               if(this.form.userTypeId === 12){
                    this.existInfoFlag = true;
               }else{
                   this.existInfoFlag = false;
               }
            }
        },
        mounted() {
            this.pageSearchHandler();
            //查询所有科室
            this.$api.office.list().then(res=>{
                this.offices = res.data;
            });
            //查询用户类别
            this.$api.constant.listByConstantCode('YHLB').then(res=>{
                this.userTypes = res.data;
            });
            //职称信息
            this.$api.constant.listByConstantCode('YSZC').then(res=>{
                this.academicInfos = res.data;
            });
        }
    };
</script>

<style scoped>

</style>